<template>
  <n-card title="试飞大纲智能生成" content-style="padding: 0;">
    <n-alert type="info" v-if="globalAgent" style="margin-bottom: 16px">
      当前使用AI Agent: <strong>{{ globalAgent.name }}</strong> -
      {{ globalAgent.description }}
    </n-alert>
    <div class="generator-layout">
      <!-- 左侧功能面板 -->
      <div class="left-panel">
        <!-- 流程导航 -->
        <n-card title="实时面板" size="small" class="process-card">
          <n-steps vertical :current="currentStep">
            <n-step
              title="需求分析"
              description="已完成"
              status="finish"
              class="step-completed"
            >
              <template #icon>
                <n-icon class="step-icon completed">
                  <CheckmarkCircleOutline />
                </n-icon>
              </template>
            </n-step>

            <n-step
              title="数据模型匹配"
              description="进行中"
              status="process"
              class="step-in-progress"
            >
              <template #icon>
                <n-icon class="step-icon in-progress">
                  <SyncCircleOutline />
                </n-icon>
              </template>
            </n-step>

            <n-step
              title="内容匹配"
              description="待开始"
              status="wait"
              class="step-pending"
            >
              <template #icon>
                <n-icon class="step-icon pending">
                  <TimeOutline />
                </n-icon>
              </template>
            </n-step>

            <n-step
              title="大纲生成"
              description="未开始"
              status="wait"
              class="step-not-started"
            >
              <template #icon>
                <n-icon class="step-icon not-started">
                  <AlertCircleOutline />
                </n-icon>
              </template>
            </n-step>
          </n-steps>
        </n-card>

        <!-- 任务编号输入 -->
        <n-card title="任务编号" size="small" class="task-card">
          <n-space vertical>
            <n-input
              v-for="i in 3"
              :key="i"
              v-model:value="taskNumbers[i - 1]"
              :placeholder="`请输入任务编号 ${i}`"
            />
          </n-space>
        </n-card>

        <!-- 操作按钮 -->
        <n-card size="small" class="action-card">
          <n-space>
            <n-button type="warning" size="small">暂停</n-button>
            <n-button type="primary" size="small">重试</n-button>
            <n-button type="error" size="small">终止</n-button>
          </n-space>
        </n-card>

        <!-- 需求描述 -->
        <n-card title="需求描述" size="small" class="requirement-card">
          <n-space vertical>
            <div
              v-for="point in requirementPoints"
              :key="point.id"
              class="requirement-point"
            >
              <n-tag :bordered="false" type="info" size="small" round>
                {{ point.id }}
              </n-tag>
              <span class="point-text">{{ point.text }}</span>
            </div>
            <n-button type="primary" size="small" @click="handleSmartParse">
              <template #icon>
                <n-icon><AnalyticsOutline /></n-icon>
              </template>
              智能解析
            </n-button>
          </n-space>
        </n-card>

        <!-- 解析结果分析 -->
        <n-card title="解析结果分析" size="small" class="analysis-card">
          <n-space vertical>
            <n-input
              v-model:value="analysisData.taskNumber"
              placeholder="任务编号"
            />
            <n-input
              v-model:value="analysisData.aircraftType"
              placeholder="飞机类型"
            />
            <n-input
              v-model:value="analysisData.environmentCondition"
              placeholder="环境条件"
            />
            <n-input
              v-model:value="analysisData.verificationIndex"
              placeholder="验证指标"
            />
            <n-input
              v-model:value="analysisData.conflictSearch"
              placeholder="冲突搜寻"
            />
            <n-button type="primary" block @click="handleConfirmAnalysis"
              >确定</n-button
            >
          </n-space>
        </n-card>
      </div>

      <!-- 中间数据匹配区 -->
      <div class="middle-panel">
        <!-- 科目匹配 -->
        <n-card title="科目匹配" class="subject-card">
          <n-data-table
            :columns="subjectColumns"
            :data="subjectData"
            :bordered="false"
            size="small"
          />
        </n-card>

        <!-- 试验点匹配 -->
        <n-card title="试验点匹配" class="test-point-card">
          <!-- 筛选栏 -->
          <div class="filter-bar">
            <n-space>
              <n-input
                v-model:value="filter.region"
                placeholder="区域"
                size="small"
              />
              <n-input
                v-model:value="filter.weather"
                placeholder="天气"
                size="small"
              />
            </n-space>
          </div>

          <!-- 试验点表格 -->
          <n-data-table
            :columns="testPointColumns"
            :data="testPointData"
            :bordered="false"
            size="small"
            class="test-point-table"
          />

          <!-- 底部操作 -->
          <div class="table-actions">
            <n-button size="small" @click="handleRematch">
              <template #icon>
                <n-icon><RefreshOutline /></n-icon>
              </template>
              重新匹配
            </n-button>
            <n-space>
              <n-button quaternary circle size="small">
                <template #icon>
                  <n-icon><CheckmarkOutline /></n-icon>
                </template>
              </n-button>
              <n-button quaternary circle size="small">
                <template #icon>
                  <n-icon><RefreshOutline /></n-icon>
                </template>
              </n-button>
            </n-space>
          </div>
        </n-card>
      </div>

      <!-- 右侧大纲预览区 -->
      <div class="right-panel">
        <n-card title="大纲内容预览" class="preview-card">
          <!-- 预览内容区域 -->
          <div class="preview-content">
            <n-empty
              v-if="!previewContent"
              description="暂无预览内容"
              size="large"
            >
              <template #icon>
                <n-icon><DocumentOutline /></n-icon>
              </template>
            </n-empty>
            <div v-else class="outline-content">
              <n-scrollbar style="max-height: 500px">
                <div
                  v-for="(section, index) in previewContent"
                  :key="index"
                  class="outline-section"
                >
                  <h4>{{ section.title }}</h4>
                  <p>{{ section.content }}</p>
                </div>
              </n-scrollbar>
            </div>
          </div>

          <!-- 操作按钮 -->
          <template #footer>
            <n-space>
              <n-button @click="handleEdit">
                <template #icon>
                  <n-icon><CreateOutline /></n-icon>
                </template>
                编辑
              </n-button>
              <n-button type="primary" @click="handleExport">
                <template #icon>
                  <n-icon><DownloadOutline /></n-icon>
                </template>
                导出
              </n-button>
            </n-space>
          </template>
        </n-card>
      </div>
    </div>
  </n-card>
</template>

<script setup>
import { ref, reactive, onMounted ,h } from "vue";
import {
  NCard,
  NSteps,
  NStep,
  NInput,
  NSpace,
  NButton,
  NTag,
  NDataTable,
  NEmpty,
  NScrollbar,
  NIcon,
} from "naive-ui";
import {
  AnalyticsOutline,
  RefreshOutline,
  CheckmarkOutline,
  DocumentOutline,
  CreateOutline,
  DownloadOutline,
  CheckmarkCircleOutline,
  SyncCircleOutline,
  TimeOutline,
  AlertCircleOutline,
} from "@vicons/ionicons5";

// 当前步骤
const currentStep = ref(1);

// 任务编号
const taskNumbers = ref(["", "", ""]);

const globalAgent = ref(null)

onMounted(() => {
  const savedAgent = localStorage.getItem('globalAgent')
  if (savedAgent) {
    globalAgent.value = JSON.parse(savedAgent)
  }
})

// 需求点
const requirementPoints = ref([
  { id: "1", text: "需求点1" },
  { id: "2", text: "需求点2" },
  { id: "3", text: "需求点3" },
  { id: "4", text: "需求点4" },
]);

// 解析结果分析数据
const analysisData = reactive({
  taskNumber: "",
  aircraftType: "",
  environmentCondition: "",
  verificationIndex: "",
  conflictSearch: "",
});

// 筛选条件
const filter = reactive({
  region: "",
  weather: "",
});

// 科目匹配表格列
const subjectColumns = [
  { title: "科目匹配", key: "subject" },
  { title: "匹配条件", key: "condition1" },
  { title: "匹配条件", key: "condition2" },
  { title: "匹配条件", key: "condition3" },
  { title: "匹配条件", key: "condition4" },
];

// 科目匹配数据
const subjectData = ref([
  {
    subject: "",
    condition1: "",
    condition2: "",
    condition3: "",
    condition4: "",
  },
  {
    subject: "",
    condition1: "",
    condition2: "",
    condition3: "",
    condition4: "",
  },
]);

// 试验点匹配表格列
const testPointColumns = [
  { title: "试验点", key: "point" },
  { title: "匹配度", key: "matchRate" },
  { title: "可用时段", key: "availableTime" },
  { title: "关键设备", key: "criticalEquipment" },
  { title: "风险等级", key: "riskLevel" },
  {
    title: "操作",
    key: "actions",
    render: () =>
      h(
        NButton,
        { size: "small", type: "primary" },
        { default: () => "查看详情" }
      ),
  },
];

// 试验点匹配数据
const testPointData = ref([
  {
    point: "RUN",
    matchRate: "85%",
    availableTime: "09:00-12:00",
    criticalEquipment: "设备A",
    riskLevel: "低",
  },
  {
    point: "KHUA",
    matchRate: "92%",
    availableTime: "14:00-17:00",
    criticalEquipment: "设备B",
    riskLevel: "中",
  },
  {
    point: "TEST001",
    matchRate: "78%",
    availableTime: "08:00-11:00",
    criticalEquipment: "设备C",
    riskLevel: "低",
  },
]);

// 预览内容
const previewContent = ref(null);

// 方法
const handleSmartParse = () => {
  console.log("智能解析");
  // 模拟解析结果
  analysisData.taskNumber = "TF2024001";
  analysisData.aircraftType = "C919";
  analysisData.environmentCondition = "晴朗，风速<5m/s";
  analysisData.verificationIndex = "飞行性能验证";
  analysisData.conflictSearch = "无冲突";
};

const handleConfirmAnalysis = () => {
  console.log("确认分析结果", analysisData);
  currentStep.value = 2;
  // 模拟生成预览内容
  previewContent.value = [
    { title: "试飞任务概述", content: "针对C919机型的飞行性能验证试飞..." },
    {
      title: "试飞科目",
      content: "1. 起飞性能测试\n2. 巡航性能测试\n3. 着陆性能测试",
    },
    {
      title: "试验点安排",
      content: "RUN试验点：09:00-12:00\nKHUA试验点：14:00-17:00",
    },
  ];
};

const handleRematch = () => {
  console.log("重新匹配");
};

const handleEdit = () => {
  console.log("编辑大纲");
};

const handleExport = () => {
  console.log("导出大纲");
};
</script>

<style scoped>
.generator-layout {
  display: grid;
  grid-template-columns: 320px 1fr 400px;
  gap: 16px;
  min-height: 800px;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.middle-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.right-panel {
  display: flex;
  flex-direction: column;
}

.process-card,
.task-card,
.action-card,
.requirement-card,
.analysis-card,
.subject-card,
.test-point-card,
.preview-card {
  height: fit-content;
}

.requirement-point {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.point-text {
  flex: 1;
}

.filter-bar {
  margin-bottom: 12px;
}

.table-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.preview-content {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outline-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.outline-section h4 {
  margin: 0 0 8px 0;
  color: #18a058;
}

.outline-section p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.6;
}

/* 步骤样式 */
.step-completed :deep(.n-step__title) {
  color: #18a058 !important;
  font-weight: 600;
}

.step-completed :deep(.n-step__description) {
  color: #18a058 !important;
}

.step-in-progress :deep(.n-step__title) {
  color: #2080f0 !important;
  font-weight: 600;
}

.step-in-progress :deep(.n-step__description) {
  color: #2080f0 !important;
}

.step-pending :deep(.n-step__title) {
  color: #f0a020 !important;
}

.step-pending :deep(.n-step__description) {
  color: #f0a020 !important;
}

.step-not-started :deep(.n-step__title) {
  color: #d03050 !important;
}

.step-not-started :deep(.n-step__description) {
  color: #d03050 !important;
}

/* 步骤图标样式 */
.step-icon {
  font-size: 20px;
}

.step-icon.completed {
  color: #18a058 !important;
}

.step-icon.in-progress {
  color: #2080f0 !important;
  animation: spin 2s linear infinite;
}

.step-icon.pending {
  color: #f0a020 !important;
}

.step-icon.not-started {
  color: #d03050 !important;
}

/* 旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 连接线颜色 */
:deep(.n-step--finish .n-step__line) {
  background-color: #18a058 !important;
}

:deep(.n-step--process .n-step__line) {
  background-color: #2080f0 !important;
}

:deep(.n-step--wait .n-step__line) {
  background-color: #f0f0f0 !important;
}

:deep(.n-card__content) {
  padding: 16px;
}

:deep(.n-card--small .n-card__content) {
  padding: 12px;
}
</style>